<template>
	<div class="spec">

		<el-container style="height: 800px; border: 1px solid #eee">
			<el-aside width="300px" style="background-color: rgb(238, 241, 246)">
				<el-menu v-for="i in tableData">
					<el-submenu :index="'index-'+i.id">
						<template slot="title"><i class="el-icon-message"></i>{{i.name}}</template>
						<el-menu-item :index="i.id+'-'+j.id" v-for="j in i.categoryList">

							<el-button @click="findSan(j.id)" type="text">{{j.name}}</el-button>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header style="text-align: right; font-size: 12px">
					<span>三级分类列表</span>
				</el-header>

				<el-main>
					<el-table :data="disanji">
						<el-table-column prop="name" label="分类名称"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="toAddSpec(scope.row)">规格编辑</el-button>
							</template>
						</el-table-column>

					</el-table>
				</el-main>
			</el-container>
		</el-container>






		<el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
			<el-form :model="data" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
				<el-form-item v-for="(group, index) in data.groups" style="margin-right: 90px;">
					<el-card class="box-card">
						<el-input size="mini" style="width: 100px;" placeholder="分组名" v-model="group.name"></el-input>
						<el-button style="margin-left: 250px; " type="text" icon="el-icon-delete-solid" @click.prevent="removeDomain(index,group)"></el-button>
						<hr color="#D9D9D9" />
						<el-form label-width="100px" :model="group">
							<el-form-item v-for=" (param,pindex) in  group.params">

								<el-input size="mini" style="width: 90px; margin-left: -110px;" placeholder="参数名" v-model="param.name"></el-input>
								<el-select v-model="param.numeric" size="mini" style="width: 90px; margin-left: 10px;" placeholder="请选择">
									<el-option label="数字" :value="true">
									</el-option>
									<el-option label="非数字" :value="false">
									</el-option>
								</el-select>

								<el-input size="mini" style="width: 60px; margin-left: 10px;" placeholder="单位" v-model="param.unit"></el-input>

								<el-select v-model="param.generic" size="mini" style="width: 90px; margin-left: 10px;" placeholder="请选择">
									<el-option label="sku通用" :value="true">
									</el-option>
									<el-option label="非通用" :value="false">
									</el-option>
								</el-select>
								<el-select v-model="param.searching" size="mini" style="width: 90px; margin-left: 10px;" placeholder="请选择">
									<el-option label="过滤" :value="true">
									</el-option>
									<el-option label="不过滤" :value="false">
									</el-option>
								</el-select>
								<el-input size="mini" style="width: 100px; margin-left: 10px;" placeholder="数值类型参数" v-model="param.segments"></el-input>
								<el-button style="margin-left: 10px;" type="text" icon="el-icon-delete-solid" @click.prevent="removeDomain2(group,pindex,param)"></el-button>

							</el-form-item>
							<el-button size="mini" type="primary" @click="addDomain2(group)">添加属性</el-button>

						</el-form>
					</el-card>

				</el-form-item>

			</el-form>

			<el-button size="mini" type="success" @click="submitForm()">保存规格模板</el-button>
			<el-button size="mini" type="primary" @click="addDomain">添加分组</el-button>
		</el-dialog>

	</div>
</template>

<script>
	export default {

		data() {
			return {
				cid: '',
				tableData: [],
				dialogVisible: false,
				data: {
					cid: null,
					groups: [{
						id: null,
						cid: null,
						name: null,
						params: [{
							id: null,
							name: null,
							numeric: false,
							unit: null,
							generic: false,
							searching: false,
							segments: null
						}]
					}]
				},
				disanji: []
				

			}

		},

		methods: {
			findSan(id) {
				console.log(id);
				this.axios.get(this.$baseUrl + "product/category/findSan", {
					params: {
						id: id
					}
				}).then((res) => {
					console.log(res);
					this.disanji = res.data.data;
				});
			},
			initData() {
				this.axios.get(this.$baseUrl + "product/category/list").then((res) => {
					console.log(res);
					this.$data.tableData = res.data.data;

				})
			},
			toAddSpec(row) {

				console.log(row);

				this.dialogVisible = true;

				this.cid = row.id;


				this.axios.get(this.$baseUrl + "product/spec-group/glist", {
					params: {
						cid: row.id
					}
				}).then((res) => {

					console.log('回显');
					console.log(res);

					this.data.groups = [];
					res.data.data.forEach(item => {
						this.data.groups.push({
							id: item.id,
							cid: this.cid,
							name: item.name,
							params: [{
								id: null,
								cid: null,
								name: null,
								numeric: false,
								unit: null,
								generic: false,
								searching: false,
								segments: null
							}]
						});

					})


					this.data.groups.forEach(value => {

						value.params = [];
						res.data.data.forEach(param => {
							param.params.forEach(pitem => {
								if (param.id == value.id) {
									value.params.push({
										id: pitem.id,
										name: pitem.name,
										numeric: pitem.numeric,
										unit: pitem.unit,
										generic: pitem.generic,
										searching: pitem.searching,
										segments: pitem.segments
									})
								}
							});
						});
					});
				})
			},

			removeDomain(index, group) {

				if (index !== -1) {
					this.data.groups.splice(index, 1)
				}


				if (group.id != null && group.id != '') {
					this.axios.get(this.$baseUrl + "product/spec-group/deleteGroup", {
						params: {
							gid: group.id
						}
					}).then((res) => {
						if (res.data.result) {
							this.$message.success("删除规格分组成功");
						} else {
							this.$message.error("删除规格分组失败");
						}
					});
				}

			},
			addDomain() {

				
				
				
				
				this.data.groups.push({
					id: null,
					cid: null,
					name: null,
					params: [{
						id: null,
						name: null,
						numeric: false,
						unit: null,
						generic: false,
						searching: false,
						segments: null
					}]
				});
				

			},
			addDomain2(group) {
				group.params.push({
					id: null,
					cid: null,
					name: null,
					numeric: false,
					unit: null,
					generic: false,
					searching: false,
					segments: null
				})

			},
			removeDomain2(group, pindex, param) {
				if (pindex !== -1) {
					group.params.splice(pindex, 1)
				}

				if (param.id != null && param.id != '') {
					this.axios.get(this.$baseUrl + "product/spec-group/deleteParam", {
						params: {
							pid: param.id
						}
					}).then((res) => {
						if (res.data.result) {
							this.$message.success("删除规格参数成功");
						} else {
							this.$message.error("删除规格参数成功");
						}
					});
				}
			},
			submitForm() {
				this.data.cid = this.cid;
				console.log('提交数据');
				console.log(this.data);
				this.axios.post(this.$baseUrl + "product/spec-group/save", this.data).then((res) => {
					console.log(this.data);
					if (res.data.result) {
						this.$message.success("编辑规格成功");
						this.dialogVisible = false;
					}
				});
				/*
				this.axios.post(this.$baseUrl + "product/spec-group/edit",this.group.gname,{
					params:{
						cid:this.qid
					}
				}).then((res)=>{
					if(res.data.result){
						this.$message.success("编辑规格成功");
						this.dialogVisible=false;
					}
				});
				*/


			}


		},
		created: function() {
			this.initData();
		},

	}
</script>

<style>
	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 680px;
	}

	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>
